<template>
  <view class="container">
	  <view class="titleheader">
		  <text class="title">{{getTitle()}}</text>
	</view>
    <scroll-view class="scroll-container" scroll-x>
		
      <view class="table">
        <view class="row header">
          <view class="cell label">小</view>
		  <view class="cell label">中</view>
          <view class="cellFirst" v-for="col in 10" :key="col"></view>
        </view>
        <view class="row" v-for="row in 10" :key="row">
          <view v-for="col in 12" :key="col" >
				<view 	class="cell" 
                @click="selectCell(row, col)"
                :class="getClass(row, col)" v-if="getCellValue(row,col)!=''">{{getCellValue(row,col).value}}</view>
				<view 	:class="getRemoveClass(row, col)"   v-else></view>
          </view>
        </view>
		<view class="row header">
			<view class="cellLast" v-for="col in 10" :key="col"></view>
			<view class="cell label" >中</view>
			<view class="cell label">大</view>
		</view>
		<view class="msg" style="margin-top: -25px;">
			  <text class="msgtitle">每个人只限排除3个两码</text>
		</view>
      </view>
	  <view style="width: 100%;margin-left: 5%;margin-top:10px;">
	    <textarea v-model="result"  disabled style="background-color: white; border-radius: 10px;"
	  	 ></textarea>
		  <text >{{count}}注，组选</text>
	  </view>
    </scroll-view>
  <uni-row style="margin-top:20px;">
	<!--  <uni-col :span="6">
	    <button class="submit-button" @click="zhiZhuanZu">值转组</button>  
	  </uni-col> -->
	  <uni-col :span="8">
	    <button class="submit-button" @click="optionResult">计算</button>  
	  </uni-col>  
	  <uni-col :span="8">
	    <button class="submit-button" @click="copy">复制</button>  
	  </uni-col>
    <uni-col :span="8">  
      <button class="submit-button" @click="setJlByTypeAndPhone">提交</button>  
    </uni-col>  
	
  </uni-row> 
  </view>
</template>

<script>
export default {
  data() {
    return {
		dataNum:{
			  "0": { "value": "00", "flag": 0, "active": 0 },
			  "1": { "value": "11", "flag": 0, "active": 0 },
			  "2": { "value": "22", "flag": 0, "active": 0 },
			  "3": { "value": "33", "flag": 0, "active": 0 },
			  "4": { "value": "44", "flag": 0, "active": 0 },
			  "5": { "value": "55", "flag": 0, "active": 0 },
			  "6": { "value": "66", "flag": 0, "active": 0 },
			  "7": { "value": "77", "flag": 0, "active": 0 },
			  "8": { "value": "88", "flag": 0, "active": 0 },
			  "9": { "value": "99", "flag": 0, "active": 0 },
			  // "10": { "value": "", "flag": 0, "active": 0 },
			  "11": { "value": "09", "flag": 1, "active": 0 },
			  
			  "12": { "value": "01", "flag": 0, "active": 0 },
			  "13": { "value": "12", "flag": 0, "active": 0 },
			  "14": { "value": "23", "flag": 0, "active": 0 },
			  "15": { "value": "34", "flag": 0, "active": 0 },
			  "16": { "value": "45", "flag": 0, "active": 0 },
			  "17": { "value": "56", "flag": 0, "active": 0 },
			  "18": { "value": "67", "flag": 0, "active": 0 },
			  "19": { "value": "78", "flag": 0, "active": 0 },
			  "20": { "value": "89", "flag": 0, "active": 0 },
			  // "21": { "value": "", "flag": 0, "active": 0 },
			  "22": { "value": "08", "flag": 1, "active": 0 },
			  "23": { "value": "19", "flag": 1, "active": 0 },
			  
			  "24": { "value": "02", "flag": 0, "active": 0 },
			  "25": { "value": "13", "flag": 0, "active": 0 },
			  "26": { "value": "24", "flag": 0, "active": 0 },
			  "27": { "value": "35", "flag": 0, "active": 0 },
			  "28": { "value": "46", "flag": 0, "active": 0 },
			  "29": { "value": "57", "flag": 0, "active": 0 },
			  "30": { "value": "68", "flag": 0, "active": 0 },
			  "31": { "value": "79", "flag": 0, "active": 0 },
			  // "32": { "value": "", "flag": 0, "active": 0 },
			  "33": { "value": "07", "flag": 1, "active": 0 },
			  "34": { "value": "18", "flag": 1, "active": 0 },
			  "35": { "value": "29", "flag": 1, "active": 0 },
			  
			  "36": { "value": "03", "flag": 0, "active": 0 },
			  "37": { "value": "14", "flag": 0, "active": 0 },
			  "38": { "value": "25", "flag": 0, "active": 0 },
			  "39": { "value": "36", "flag": 0, "active": 0 },
			  "40": { "value": "47", "flag": 0, "active": 0 },
			  "41": { "value": "58", "flag": 0, "active": 0 },
			  "42": { "value": "69", "flag": 0, "active": 0 },
			  // "43": { "value": "", "flag": 0, "active": 0 },
			  "44": { "value": "06", "flag": 1, "active": 0 },
			  "45": { "value": "17", "flag": 1, "active": 0 },
			  "46": { "value": "28", "flag": 1, "active": 0 },
			  "47": { "value": "39", "flag": 1, "active": 0 },
			  
			  "48": { "value": "04", "flag": 0, "active": 0 },
			  "49": { "value": "15", "flag": 0, "active": 0 },
			  "50": { "value": "26", "flag": 0, "active": 0 },
			  "51": { "value": "37", "flag": 0, "active": 0 },
			  "52": { "value": "48", "flag": 0, "active": 0 },
			  "53": { "value": "59", "flag": 0, "active": 0 },
			  // "54": { "value": "", "flag": 0, "active": 0 },
			  "55": { "value": "05", "flag": 1, "active": 0 },
			  "56": { "value": "16", "flag": 1, "active": 0 },
			  "57": { "value": "27", "flag": 1, "active": 0 },
			  "58": { "value": "38", "flag": 1, "active": 0 },
			  "59": { "value": "49", "flag": 1, "active": 0 },
			  
			  "60": { "value": "05", "flag": 0, "active": 0 },
			  "61": { "value": "16", "flag": 0, "active": 0 },
			  "62": { "value": "27", "flag": 0, "active": 0 },
			  "63": { "value": "38", "flag": 0, "active": 0 },
			  "64": { "value": "49", "flag": 0, "active": 0 },
			  // "65": { "value": "", "flag": 0, "active": 0 },
			  "66": { "value": "04", "flag": 1, "active": 0 },
			  "67": { "value": "15", "flag": 1, "active": 0 },
			  "68": { "value": "26", "flag": 1, "active": 0 },
			  "69": { "value": "37", "flag": 1, "active": 0 },
			  "70": { "value": "48", "flag": 1, "active": 0 },
			  "71": { "value": "59", "flag": 1, "active": 0 },
			  
			  "72": { "value": "06", "flag": 0, "active": 0 },
			  "73": { "value": "17", "flag": 0, "active": 0 },
			  "74": { "value": "28", "flag": 0, "active": 0 },
			  "75": { "value": "39", "flag": 0, "active": 0 },
			  // "76": { "value": "", "flag": 0, "active": 0 },
			  "77": { "value": "03", "flag": 1, "active": 0 },
			  "78": { "value": "14", "flag": 1, "active": 0 },
			  "79": { "value": "25", "flag": 1, "active": 0 },
			  "80": { "value": "36", "flag": 1, "active": 0 },
			  "81": { "value": "47", "flag": 1, "active": 0 },
			  "82": { "value": "58", "flag": 1, "active": 0 },
			  "83": { "value": "69", "flag": 1, "active": 0 },
			  
			  "84": { "value": "07", "flag": 0, "active": 0 },
			  "85": { "value": "18", "flag": 0, "active": 0 },
			  "86": { "value": "29", "flag": 0, "active": 0 },
			  // "87": { "value": "", "flag": 0, "active": 0 },
			  "88": { "value": "02", "flag": 1, "active": 0 },
			  "89": { "value": "13", "flag": 1, "active": 0 },
			  "90": { "value": "24", "flag": 1, "active": 0 },
			  "91": { "value": "35", "flag": 1, "active": 0 },
			  "92": { "value": "46", "flag": 1, "active": 0 },
			  "93": { "value": "57", "flag": 1, "active": 0 },
			  "94": { "value": "68", "flag": 1, "active": 0 },
			  "95": { "value": "79", "flag": 1, "active": 0 },
			  
			  "96": { "value": "08", "flag": 0, "active": 0 },
			  "97": { "value": "19", "flag": 0, "active": 0 },
			  // "98": { "value": "", "flag": 0, "active": 0 },
			  "99": { "value": "01", "flag": 1, "active": 0 },
			  "100": { "value": "12", "flag": 1, "active": 0 },
			  "101": { "value": "23", "flag": 1, "active": 0 },
			  "102": { "value": "34", "flag": 1, "active": 0 },
			  "103": { "value": "45", "flag": 1, "active": 0 },
			  "104": { "value": "56", "flag": 1, "active": 0 },
			  "105": { "value": "67", "flag": 1, "active": 0 },
			  "106": { "value": "78", "flag": 1, "active": 0 },
			  "107": { "value": "89", "flag": 1, "active": 0 },
			  
			  "108": { "value": "09", "flag": 0, "active": 0 },
			  // "109": { "value": "", "flag": 0, "active": 0 },
			  "110": { "value": "00", "flag": 1, "active": 0 },
			  "111": { "value": "11", "flag": 1, "active": 0 },
			  "112": { "value": "22", "flag": 1, "active": 0 },
			  "113": { "value": "33", "flag": 1, "active": 0 },
			  "114": { "value": "44", "flag": 1, "active": 0 },
			  "115": { "value": "55", "flag": 1, "active": 0 },
			  "116": { "value": "66", "flag": 1, "active": 0 },
			  "117": { "value": "77", "flag": 1, "active": 0 },
			  "118": { "value": "88", "flag": 1, "active": 0 },
			  "119": { "value": "99", "flag": 1, "active": 0 },
		},
		mySelectedCells: [] ,// 存储选中的单元格
		selectedCells:[],// 选中后剩余的数据
		type:"plw",
		commit:false,
		lotteryNo:0, // 期号
		result:[],
		count:0,
    };
  },
  onLoad(query) {
  	this.type = query.type
	this.getLastLotteryNo()
	this.getJlByTypeAndPhone()
  },
  methods: {
	  zhiZhuanZu() {
	  	for (var i = 0; i < this.result.length; i++) {
	  		// 将每个字符串按字符拆分成数组，转换为数字后排序，再拼接成字符串
	  		const array = this.result[i].split('').map(Number);
	  		array.sort((a, b) => a - b);
	  		let result = array.join('');
	  		this.spliceAll[i] = result;
	  	}
	  	// 对整个字符串数组进行排序
	  	this.result.sort((a, b) => a.localeCompare(b));
	  	// 去重操作
	  	this.result = this.result.filter((value, index, self) => {
	  		return self.indexOf(value) === index;
	  	});
	  },
	  getTitle(){
		  let title=""
		  if(this.type=='plw'){
			 title =  this.lotteryNo+"期排三游戏接龙"
		  }
		  if(this.type=='fcsd'){
			 title =  this.lotteryNo+"期3D游戏接龙"  
		  }
		  return title
	  },
	  copy(){
		  const textToCopy = this.result;
		  // 复制功能
		  uni.setClipboardData({
		  	data: textToCopy, // 要复制到剪贴板的文本
		  	success: () => {
		  		// 成功回调函数
		  		uni.showToast({
		  			title: '复制成功',
		  			icon: 'success'
		  		});
		  	},
		  	fail: () => {
		  		// 失败回调函数
		  		uni.showToast({
		  			title: '复制失败',
		  			icon: 'none'
		  		});
		  	}
		  });
	  },
	  optionResult(){ // 计算结果
		  const removeArray = this.mySelectedCells;
		  const flag0Array = [];
		  const flag1Array = [];
		  // 遍历 dataNum 对象
		  for (const key in  this.dataNum) {			  
		      // 将 key 转换为数字以便与 removeArray 进行比较
		      const numKey = parseInt(key);
		      // 检查当前键是否在待移除数组中
		      if (!removeArray.includes(numKey)&&this.selectedCells.includes(numKey)) {
		          // 根据 flag 的值将其添加到相应的数组中
		          if (this.dataNum[key].flag === 0) {
		              flag0Array.push(this.dataNum[key].value);
		          } else if ( this.dataNum[numKey].flag === 1) {
		              flag1Array.push(this.dataNum[key].value);
		          }
		      }
		  }
		  let optResut = []
		 flag0Array.forEach(v0=>{
			let arrv0=v0.split("")
			flag1Array.forEach(v1=>{
				let arrv1=v1.split("")
				if(arrv0[1]==arrv1[0]){
					const concatenatedNumber = `${v0}${arrv1[1]}`;
					optResut.push(concatenatedNumber)
				}
			}) 
		 })
		optResut.sort((a, b) => a - b);
		this.count = optResut.length
		this.result = optResut.join(" ")
	  },
	  getLastLotteryNo(){ // 获取最新期号
	  		  this.$myRequest({
	  		  	method: 'get',
	  		  	url: '/getLastLotteryNo',
	  		  	data: {type:this.type}
	  		  }).then((res) => {
	  			  if(res.flag){
	  				   this.lotteryNo = Number(res.data)+1
	  			  }
	  		})
	  },
	  getJlByTypeAndPhone(){
		  this.$myRequest({
		  	method: 'get',
		  	url: '/getJlByTypeAndPhone',
		  	data: {type:this.type}
		  }).then((res) => {
		  	if(res.flag){
				if(res.data){
					this.mySelectedCells = res.data.mySelectedCells
					this.selectedCells = res.data.selectedCells
					if(this.selectedCells.length == 0){
						for (const key in  this.dataNum) {
						    // 将 key 转换为数字以便与 removeArray 进行比较
						    const numKey = parseInt(key);
							this.selectedCells.push(numKey)
						}
					}
					if(this.mySelectedCells.length===3){
						this.commit = true
					}
					
				}
			} 
		  })
	  },
	  setJlByTypeAndPhone(){
		  if(this.commit){
			  uni.showToast({
				title: '您今日已提！'
			  });
			  return 
		  }
		  const removeArray = this.mySelectedCells;
		  const flag0Array = [];
		  const flag1Array = [];
		  if(removeArray.length<3){
			  uni.showToast({
					title: '至少去除3项！'
			  });
			  return 
		  }
		  // 遍历 dataNum 对象
		  for (const key in  this.dataNum) {
		      // 将 key 转换为数字以便与 removeArray 进行比较
		      const numKey = parseInt(key);
		      // 检查当前键是否在待移除数组中
		      if (!removeArray.includes(numKey)&&this.selectedCells.includes(numKey)) {
		          // 根据 flag 的值将其添加到相应的数组中
		          if (this.dataNum[key].flag === 0) {
		              flag0Array.push(numKey);
		          } else if ( this.dataNum[numKey].flag === 1) {
		              flag1Array.push(numKey);
		          }
		      }
		  }
		  if(flag0Array.length<4){
			  uni.showToast({
					title: '左侧至少剩余4项！'
			  });
			  return 
		  }
		  if(flag1Array.length<4){
			  uni.showToast({
					title: '右侧至少剩余4项！'
			  });
			  return 
		  }
		 this.selectedCells = flag0Array.concat(flag1Array);
		  let data ={"type":this.type,
					"mySelectedCells":this.mySelectedCells,
					"selectedCells":this.selectedCells
				}
	  		  this.$myRequest({
	  		  	method: 'post',
	  		  	url: '/setJlByTypeAndPhone',
	  		  	data:data
	  		  }).then((res) => {
	  		  	if(res.flag){
					setTimeout(function() {
					 uni.showToast({
					 	title: "提交成功！"
					 });
					},500)
	  				 this.getJlByTypeAndPhone()
	  			}else{
					setTimeout(function() {
					 uni.showToast({
					 	title: res.data
					 });
					},500)
				
					 this.getJlByTypeAndPhone()
				}
	  		  	 
	  		  })
	  },
	  getClass(row, col){
		   return [
			 this.isSelected(row, col) ? 'selected' : '',
			 this.getCellClass(row, col).flag==0 ? 'left' : 'right',
			];
	  },
	  getRemoveClass(row, col){
			return [
			 "cell",
			 this.getgetRemoveCellClass(row, col)
			];
	  },
	  getgetRemoveCellClass(row, col){
			let  key = (row-1)*12+(col-1)
			let data = this.dataNum[key]
			if(data){
				if(data.flag==0){
					return "left"
				}else{
					return "right"
				}
			}
			return	""
	  },
	  getCellClass(row, col){
	  		  let  key = (row-1)*12+(col-1)
	  		  if(this.mySelectedCells.includes(key)){
	  			  return ""
	  		  }
	  		  let data = this.dataNum[key]
	  		  let value = ""
	  		  if(data){
	  			 value =  data
	  		  }
	  		return  value
	  },
	  getCellValue(row, col){
		  let  key = (row-1)*12+(col-1)
		  let data = []
		  if(this.selectedCells.includes(key)){
				data = this.dataNum[key]
		  }
		  // if(this.mySelectedCells.includes(key)){
			 //  return ""
		  // }
		  let value = ""
		  if(data){
			 value =  data
		  }
		return  value
	  },
    selectCell(row, col) {
		if(this.commit){
			uni.showToast({
				title: '您已提交！'
			});
			return
		}
      const cell  = (row-1)*12+(col-1)
      const index = this.mySelectedCells.indexOf(cell);
      if (index > -1) {
        // 如果已选中，取消选择
        this.mySelectedCells.splice(index, 1);
      } else {
		  if(this.mySelectedCells.length>2){
			  uni.showToast({
				title: '最多去除3个选项！'
			  });
			  return
		  }
        // 如果未选中，添加到选中列表
        this.mySelectedCells.push(cell);
      }
    },
    isSelected(row, col) {
		  const cell  = (row-1)*12+(col-1)
      return this.mySelectedCells.includes(cell);
    }
  }
};
</script>

<style>
.container {
  height: 100vh;
  padding: 10px;  
  background-color: #f6eee8;  
  border-radius: 10px;  
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
}

.scroll-container {
  /*  width: 600px;固定宽度 */
  overflow-x: auto; /* 允许横向滚动 */
  white-space: nowrap; /* 防止换行 */
}

.table {
  display: inline-block; /* 使用inline-block以适应scroll-view宽度 */
}

.row {
  display: flex;
  margin: 0; /* 确保没有额外的间隔 */
}

.cell {
  border: 1px solid #ccc;
  width: 30px; /* 固定列宽 */
  height: 30px; /* 固定行高，使单元格成为正方形 */
  text-align: center;
  line-height: 30px; /* 垂直居中文本 */
  cursor: pointer; /* 鼠标悬停时显示手形光标 */
 
}
.cellFirst {
  border: 0px solid #ccc;
  width: 30px; /* 固定列宽 */
  height: 30px; /* 固定行高，使单元格成为正方形 */
  text-align: center;
  line-height: 30px; /* 垂直居中文本 */
  cursor: pointer; /* 鼠标悬停时显示手形光标 */
 
}
.cellLast{
	border: 1px solid #f6eee8;
	width: 30px; /* 固定列宽 */
	height: 30px; /* 固定行高，使单元格成为正方形 */
	text-align: center;
	line-height: 30px; /* 垂直居中文本 */
	cursor: pointer; /* 鼠标悬停时显示手形光标 */
}
.left{
	 background-color:#C5DFB5
}
.right{
	 background-color:#F7CAAB
}
.label {
  font-weight: bold; /* 加粗字体 */
  background-color: #f0f0f0; /* 背景颜色 */
}

.selected {
  background-color: #D81F46; /* 选中单元格的背景色 */
}
.submit-button {  
  width: 70%;  
  height: 45px;  
  background-color: #742305;  
  color: white;  
  border: none;  
  border-radius: 5px;  
  font-size: 16px;  
  cursor: pointer;  
  transition: background-color 0.3s;  
}  
	
.msg{
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center;    /* 垂直居中 */
	 
}
.msgtitle {
  font-size: 10px;       /* 标题字体大小 */
  text-align: center;    /* 文本居中对齐 */
  color: #D81F46;
}
.titleheader{
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center;    /* 垂直居中 */
 
}
.title {
  font-size: 20px;       /* 标题字体大小 */
  font-weight: bold;     /* 字体加粗 */
  text-align: center;    /* 文本居中对齐 */
  color: #D81F46;
}
</style>
